<template>
  <div class="app-container approvePanl">
    <div class="top">
      <span class="title">{{ approve.name }}</span>
      <div class="header">
        <div class="tabs">
          <div
            v-for="(name, index) in tab"
            :key="index"
            class="tab"
            :class="{ 'active': index === active }"
            @click="tabChange(index)"
          >
            <span class="number">{{ index + 1 }}</span><span>{{ name }}</span>
          </div>
          <!-- <div class="tab active">
            <span class="number"></span>
            <span>流程设计</span>
          </div> -->
        </div>
      </div>
      <div class="right">
        <el-button size="small" type="info" @click="SaveConfig()">取消</el-button>
        <el-button size="small" type="success" :loading="saveLoading" @click="SaveConfig()">发布</el-button>
      </div>
    </div>
    <div class="content">
      <el-form v-if="active === 0" ref="mform" class="basic" :model="approve" :rules="approveRules" label-width="80px">
        <el-form-item label="流程编号" prop="nprocessId">
          <el-input v-model="approve.processId" placeholder="" disabled="disabled" />
        </el-form-item>
        <el-form-item label="流程名称" prop="processName" :error="error.processName">
          <el-input v-model="approve.processName" placeholder="请输入审批名称" />
        </el-form-item>
        <el-form-item label="流程分组" prop="processType" :error="error.processType">
          <el-select v-model="approve.processType" placeholder="请选择分组">
            <el-option v-for="item in groupData" :key="item.name" :label="item.name" :value="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="流程描述" prop="describe" :error="error.describe">
          <el-input v-model="approve.describe" type="textarea" placeholder="请输入审批描述" />
        </el-form-item>
        <el-form-item label="状态" required>
          <el-radio-group v-model="approve.status">
            <el-radio label="1">开启</el-radio>
            <el-radio label="2">关停</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="success" :loading="approveLoading" @click="NextInfo()">下一步</el-button>
        </el-form-item>
      </el-form>
      <!-- 表单设计 -->
      <designer v-show="active === 1" :widget-list1="widgetList" :node="node" @changed="getwidget" />
      <!--流程设计  -->
      <flowpath v-show="active === 2" :widget-list1="widgetList" :node1="node" @changed="getflowpath" />
      <!-- <flowpath @changed="getflowpath" :widgetList="widgetList"></flowpath> -->
    </div>
  </div>
</template>

<script>
// 载入表单设计组件
import designer from './componentDesigner/designer'
// 载入流程设计组件
import flowpath from './componentFlowPath/flowpath'
//
import { getSingleData, editProcessData, addProcessData } from '@/api/process'
import { mapGetters } from 'vuex'
export default {
  name: 'ApproveConfigEdit',
  // designer,
  components: { designer, flowpath },
  data() {
    return {
      active: 0,
      tab: ['基础设置', '表单设计', '流程设计', '高级设置'],
      // tab: ['基础设置', '流程设计', '高级设置'],
      approve: {
        processId: 'process_' + Math.floor(Math.random() * 10000),
        processName: '',
        processType: null,
        describe: '',
        status: '1'
      },
      approveLoading: false,
      approveRules: {
        processName: [
          { required: true, message: '请输入审批名称', trigger: 'blur' },
          {
            min: 4,
            max: 20,
            message: '长度在 4 到 20 个字符',
            trigger: 'blur'
          }
        ],
        processType: [{ required: true, message: '请选择分组', trigger: 'change' }]
      },
      error: {},
      saveLoading: false,
      widgetList: [],
      node: {},
      groupData: [
        {
          name: '财务'
        },
        {
          name: '人力'
        },
        {
          name: '业务'
        }
      ]
      // widgetList:[{"componentName":"TextField","icon":"icon-xianxing","active":true,"name":"单行输入框","flowpath":true,"props":{"label":"单行输入框","placeholder":"请输入","id":"S5ActIrfYi","required":true,"defaultValue":"","name":"TextField_5yrJqo517H"}},{"componentName":"NumberField","icon":"icon-sz","active":false,"name":"数字输入框","flowpath":true,"props":{"label":"数字输入框","placeholder":"请输入","id":"O7v7GKBgSX","required":true,"defaultValue":0,"name":"NumberField_LzgYj9ROv1"}}]

    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    const id = this.$route.query.Id // this.$route.params && this.$route.params.id
    this.processType = this.$route.query.type
    if (this.processType === 'edit') {
      this.editContent(id)
    }
  },
  methods: {
    // 信息编辑数据获取
    editContent(Id) {
      getSingleData({ Id }).then(response => {
        this.approve = response.data
        this.widgetList = this.approve.widgetList ? this.approve.widgetList : []
        this.node = this.approve.nodeData ? this.approve.nodeData : {}
      }).catch(err => {
        console.log(err)
      })
    },
    tabChange(index) {
      this.active = this.approve.processName ? index : 0
      if (this.approve.processName === '') {
        this.$message.warning('请将流程的基础信息填写完整！再进入下一步操作')
      }
    },

    // 下一步
    NextInfo() {
      const date = new Date(this.approve.crateDate ? this.approve.crateDate : '') //
      const newDate = date.getFullYear() + '-' + date.getMonth() + 1 + '-' + date.getDate()
      this.approve.crateDate = newDate
      this.approve.widgetList = this.approve.widgetList
      this.approve.nodeData = this.approve.nodeData ? this.approve.nodeData : {}
      this.$refs.mform.validate((valid) => {
        if (valid) {
          this.approveLoading = true
          this.error = {}
          editProcessData(this.approve).then(response => {
            if (response.code !== 20000) {
              this.$message.error('进入下一步失败！')
            } else {
              this.$message.success('进入下一步！')
              this.active = 1
              this.widgetList = this.approve.widgetList ? this.approve.widgetList : []
              this.node = this.approve.nodeData ? this.approve.nodeData : {}
              this.approveLoading = false
            }
            // console.log(response.data)
          })
          // Test(this.approve)
          //   .then(() => {
          //     Message.success("操作成功");
          //   })
          //   .catch((res) => {
          //     if (res.data) {
          //       this.error = res.data;
          //     }
          //   })
          //   .finally(() => {
          //     this.approveLoading = false;
          //   });
        }
      })
    },
    getwidget(data) {
      // console.log("输出",data)
      this.widgetList = data
    },
    getflowpath(data) {
      this.node = data
    },
    SaveConfig() {
      // console.log('---------表单设计JSON----------')
      // console.log(JSON.stringify(this.widgetList))
      // console.log('---------流程设计JSON----------')
      // console.log(JSON.stringify(this.node))
      // alert('已打印到控制面板，请F12查看')
      // addProcessData
      this.approve.widgetList = this.widgetList
      this.approve.node = this.node
      if (this.approve.id !== null) {
        editProcessData(this.approve).then(response => {
          if (response.code !== 20000) {
            this.$message.error('编辑失败！')
          } else {
            this.$message.success('编辑成功！')
            this.active = 1
            this.approveLoading = false
          }
          console.log(response.data)
        })
      } else {
        addProcessData(this.approve).then(response => {
          if (response.code !== 20000) {
            this.$message.error('新增失败！')
          } else {
            this.$message.success('新增成功！')
            // this.active=1
            this.approveLoading = false
          }
          console.log(response.data)
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  .top {
    z-index: 101;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 54px;
    background: #fff;
    box-shadow: 0 1px 4px 0 rgba(17, 31, 44, 0.06);

    .title {
      display: inline-block;
      max-width: 240px;
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #111f2c;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-left: 15px;
    }

    .header {
      position: absolute;
      text-align: center;
      left: 0;
      right: 0;

      .tabs {
        position: relative;
        display: inline-block;
        align-items: center;
        justify-content: center;

        .tab {
          position: relative;
          display: flex;
          padding: 16px 16px;
          text-decoration: none;
          font-size: 14px;
          color: rgba(17, 31, 44, 0.56);
          cursor: pointer;
          float: left;
          .number {
            display: inline-block;
            color: #979797;
            background: #fff;
            border: 1px solid #979797;
            width: 14px;
            height: 14px;
            line-height: 14px;
            font-size: 12px;
            margin-right: 6px;
            border-radius: 50%;
          }
        }

        .tab.active {
          color: #8bc349;

          .number {
            font-weight: normal;
            color: #fff;
            background: #8bc349;
            border: 1px solid #8bc349;
          }
        }
      }
    }

    .right {
      position: absolute;
      right: 10px;
    }
  }

  .content {
    width: 100%;
    // padding-top: 54px;
    background: #f5f5f7;
    overflow: auto;

    .basic {
      width: 400px;
      padding: 30px;

      ::v-deep .el-select {
        display: block;
      }
    }
  }
}
</style>
<style lang="scss">
/*防止样式污染*/
.approvePanl {
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
    background: #ccc;
  }

  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
    border-radius: 10px;
    background: #f5f5f5;
  }
}

</style>
